<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <el-form-item label="区域">
        <el-select class="w233" size="small" v-model="form.field1" placeholder="请选择区域">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="文件系统名称">
        <el-input class="w233" v-model="form.field2" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="可用区">
        <el-radio-group v-model="form.field3">
              <el-radio-button label="可用区1"></el-radio-button>
              <el-radio-button label="可用区2"></el-radio-button>
              <el-radio-button label="可用区3"></el-radio-button>
            </el-radio-group>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="文件系统类型">
        <el-radio-group v-model="form.field4">
              <el-radio-button label="通用型"></el-radio-button>
            </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="存储类型">
        <el-radio-group v-model="form.field5">
          <div class="radio-item"><el-radio style="min-width: 130px;" label="1"><span class="name">标准型</span></el-radio><div class="pz">5KLOPS | 150MB/s | 2~5ms | 500GB~32TB</div></div>
          <div class="radio-item"><el-radio style="min-width: 130px;" label="2"><span class="name">性能型</span></el-radio><div class="pz">20KLOPS | 350MB/s | 1~2ms | 500GB~32TB</div></div>
          <div class="radio-item"><el-radio style="min-width: 130px;" label="3"><span class="name">标准型增强版</span></el-radio><div class="pz">15KLOPS | 1GB/s | 2~5ms | 10TB~320TB</div></div>
          <div class="radio-item"><el-radio style="min-width: 130px;" label="4"><span class="name">性能型增强版</span></el-radio><div class="pz">100KLOPS | 2MB/s | 1~2ms | 10TB~320TB</div></div>
          </el-radio-group>
      </el-form-item> -->
      <el-form-item label="容量">
         <el-input-number class="w215 mr3" v-model="form.field6" size="small" :min="1"></el-input-number>GB
      </el-form-item>
      <el-form-item label="协议">
        <el-select class="w233" size="small" v-model="form.field7" placeholder="请选择协议">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="虚拟私有云">
         <div class="flex-c">
           <el-select size="small" class="w233 mr60" v-model="form.field8" placeholder="请选择虚拟私有云">
             <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
           <el-select size="small" class="w233" v-model="form.field9" placeholder="请选择子网">
             <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
           <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
           <div class="btntext">新建虚拟私有云</div>
         </div>
       </el-form-item>
       <el-form-item label="安全组">
         <div class="flex-c">
           <el-select size="small" class="w233" v-model="form.field10" placeholder="请选择">
             <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
           <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
           <div class="btntext">新建安全组</div>
         </div>
       </el-form-item>
       <!-- <fbr></fbr>
      <el-form-item label="传输安全">
        <el-radio-group v-model="form.field11">
            <el-radio :label="1">加密</el-radio>
            <el-radio :label="2">不加密</el-radio>
          </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item label="标签">
        <div style="min-height: 80px;">
          <div class="flex-c">
            <pbtn @click="hasTag=true" class="mr10"></pbtn>
            <div>添加标签</div>
          </div>
          <div >
            <div class="flex-c" v-show="hasTag">
              <pbtn @click="hasTag=false" iname="minus" class="mr10"></pbtn>
              <el-input size="small" style="width:233px;margin-right: 40px;" v-model="form.field12" placeholder="请输入标签键"></el-input>
              <el-input size="small" style="width:233px;" v-model="form.field13" placeholder="请输入标签值"></el-input>
            </div>
          </div>
        </div>
      </el-form-item> -->
      <el-form-item label="申请数">
         <el-input-number class="w215" v-model="form.field16" size="small" :min="1"></el-input-number>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
export default{
    data() {
      return {
        hasTag:false,
        form: {
          field1:'',
          field2:"",
          field3:'可用区1',
          field4:'通用型',
          field5:'1',
          field6:1,
          field7:'',
          field8:'',
          field9:'',
          field10:'',
          field11:1,
          field12:'',
          field13:'',
          field14:'',
          field15:'',
          field16:'',
          field17:'',
          field18:'',
          field19:'',
        },
        option:[
          {label:'东南中心',value:'1111'},
          {label:'南方中心',value:'2222'},
          {label:'北方中心',value:'3333'},
        ],
        option1:[
          {label:'NFSv3',value:'NFSv3'},
          {label:'NFSv4',value:'NFSv4'},
          {label:'CIFS',value:'CIFS'},
          {label:'HDFS',value:'HDFS'},
          {label:'S3',value:'S3'},
          {label:'Swift',value:'Swift'},
        ],
        option2:[],

      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
    }

  }
</script>

<style scoped lang="less">
.radio-item{
  display: flex;
  align-items: center;
  margin: 20px 0;
  .name{
    font-weight: 400;
    font-size: 14px;
    color: #000000a5;
  }
  .pz{
    font-weight: 400;
    font-size: 14px;
    color: #0000006d;
  }
}
</style>
